<template>
  <div class="config">
    <MainSlot>
      <span slot="title">计划类别显示顺序</span>
      <button slot="one" @click="ok">确认变更</button>
      <button slot="two" @click="up">▲</button>
      <button slot="three" @click="down">▼</button>
      <button slot="four">退出</button>
    </MainSlot>
    <el-table
      ref="singleTable"
      :data="tableData"
      height="720"
      highlight-current-row
      border
      @current-change="handleCurrentChange"
      style="width: 100%"
    >
      <!-- <el-table-column label="序号" type="index" width="405"> </el-table-column> -->
      <el-table-column prop="id" label="序号" width="405"> </el-table-column>
      <el-table-column prop="jhlbdm" label="计划录取代码" width="405">
      </el-table-column>
      <el-table-column prop="jhlbmc" label="计划录取名称" width="405">
      </el-table-column>
      <el-table-column prop="lqrs" label="录取人数"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { request } from "../../network/request";
import MainSlot from "../common/MainSlot";
export default {
  name: "",
  data() {
    return {
      tableData: [
        {
          id: 0,
          jhlbdm: "18",
          jhlbmc: "高校专项",
          lqrs: "10",
        },
      ],
      currentData: "",
      index: 0,
    };
  },
  methods: {
    handleCurrentChange(val) {
      console.log(val);
      console.log(this.tableData.indexOf(val));
      this.index = this.tableData.indexOf(val);
      this.currentData = val;
    },
    ok() {
      // this.tableData[0].id = 999
      request({
        url: 'http://118.31.51.131:8081/api/zsxt/xtgl/xspz',
        method: 'post',
        data: this.tableData,
        params: {
          token: sessionStorage.getItem('token')
        }
      }).then(value => {
        console.log(value);
        alert("变更成功")
      })
    },
    up() {
      if (this.currentData != "" && this.index != 0) {
        let item = this.tableData[this.index];
        this.tableData[this.index].id--;
        this.$set(this.tableData, this.index, this.tableData[this.index - 1]);
        this.tableData[this.index - 1].id++;
        this.$set(this.tableData, this.index - 1, item);
        this.index--;
      }
    },
    down() {
      if (this.currentData != "" && this.index != this.tableData.length - 1) {
        let item = this.tableData[this.index];
        this.tableData[this.index].id++;
        this.$set(this.tableData, this.index, this.tableData[this.index + 1]);
        this.tableData[this.index + 1].id--;
        this.$set(this.tableData, this.index + 1, item);
        this.index++;
      }
    },
  },
  created() {
    request({
      url: "http://118.31.51.131:8081/api/zsxt/xtgl/gljhzrs",
      method: "post",
      params: {
        token: sessionStorage.getItem("token"),
      },
    }).then((value) => {
      console.log(value);
      // this.tableData = value.data
      value.data.sort((a, b) => {
        return a.id - b.id;
      });
      this.tableData = value.data;
    });
  },
  beforeCreate() {
    if (sessionStorage.getItem("token") == null) {
      this.$router.push("/login");
    } else {
      let token = sessionStorage.getItem("token");
      let length = sessionStorage.getItem("token").length;
      if (token[length - 6] == "0") {
        this.$router.replace("/login");
      }
    }
  },
  components: {
    MainSlot,
  },
};
</script>

<style scoped>
.config ::v-deep .el-table .cell {
  text-align: center;
}
</style>